<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>垃圾分类查询</title>
<link href="<%=path%>/static/usercss/css/all.css?3rrioi" rel="stylesheet" type="text/css">
<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
</head>
<body>
<jsp:include page="/WEB-INF/web/includ/header.jsp"></jsp:include>
<section>
<div class="statisticsPage" id="statisticsPage"></div>

<div class="innertable" id="innertable">
<div class="statistics">
	
        <dl>
        <dt>发生地</dt>
        <dd>
        <input type="hidden" value="${requestScope.rubbish.id }" name="rubbishId">
        <select name="province" id="province">
		        <c:if test="${requestScope.provinces==null }">
			        	<option value="fenlei1-1">----------------------</option>
        		</c:if>
        		<c:if test="${requestScope.provinces!=null }">
        			<option value="-1">全国</option>
	        		<c:forEach items="${requestScope.provinces }" var="province" varStatus="stat">
	        				<option value="${province.province_ID }">${province.province_name }</option>
	        		</c:forEach>
        		</c:if>
        </select>
        <select name="cityId" id="city">
        	<option value="fenlei1-1">----------------------</option>
        
        </select>年份
        <select name="year" id="year">
        	<option value="2019" selected>2019</option>
        	<option value="2018" >2018</option>
        	<option value="2017" >2017</option>
        </select>
        </dd>
      </dl>
       <input id="statisticsByCity" type="button" value="查询年份详情">
       
      <div id="container" ></div>
      <dl>
        <dt>起止时间</dt>
        <dd><input value="选择开始时间" name="beginTime" type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}' })" id="datemin" class="input-text Wdate" style="width:120px;"></dd>
        <dd><input value="选择结束时间" name="endTime" type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d' })" id="datemax" class="input-text Wdate" style="width:120px;"></dd>
      </dl>
     <input id="searchByPeriod" type="button" value="查询统计结果">
     <div class="result">
     <span id="disposeCount">回收量:</span>
     <span id="dischargeCount">排放量:</span>
     </div>
    
      <input id="returnToDetail" type="button"  value="返回">
         </div>
    </div>
</div>
<script type="text/javascript" src="<%=path %>/static/managecss/lib/My97DatePicker/4.8/WdatePicker.js"></script> 

<div class="wrap">
  <div id="seach">
    <div id="logo"><a href="http://fenlicx.qinglab.cn" title="垃圾分类查询">分类查询</a></div>
    <div class="seach">
      <input type="text" name="seach" class="seach_txt" id="seach">
      <input type="submit" class="seach_bun" name="button" id="button" value="查询分类">
    </div>
  </div>
<nav>
  <div class="title">
    <h1>${requestScope.rubbish.name}</h1>
    
  </div>
  <div id="breadcrumb">
    <ul>
      <li><a href="#">${requestScope.rubbish.secondtype.firsttype.title}</a><span>></span></li>
      <li><a href="#">${requestScope.rubbish.secondtype.title}</a><span>></span></li>
     	<li><a href="#">${requestScope.rubbish.name}</a><span></span></li>
    </ul>
  </div>
</nav>
<article class="content">
  <div class="pic"><img src="<%=path%>/static/rubbish_img/${requestScope.rubbish.pic}"></div>
  <div class="mgs">
  <h3>
    <a href="#">${requestScope.rubbish.secondtype.firsttype.title}</a>
    <span>></span>
    <a href="#">${requestScope.rubbish.secondtype.title}</a>
   
  </h3>
  <div class="icon">
    <img src="<%=path%>/static/rubbishType_img/${requestScope.rubbish.secondtype.firsttype.icon}" alt="可回收标志" >
    <img src="<%=path%>/static/rubbishType_img/${requestScope.rubbish.secondtype.icon}" alt="纸质回收标志" >
  </div>
  	
  
   	<label>${requestScope.rubbish.content}</label>
    
   </div>
   <div class="cle"></div>
  <div class="sta">
    <ul>
    <c:forEach items="${requestScope.datas.list}" var="data" varStatus="stat">
      <li>
      	 <div class="project">时间段：</div>
        <div class="value" style="width:300px"><fmt:formatDate value="${data.beginTime}" pattern="yyyy-MM-dd" />--<fmt:formatDate value="${data.endTime}" pattern="yyyy-MM-dd" /></div>
        <div class="project"><c:if test="${data.isDispose==true }" var="flag">回收量：</c:if><c:if test="${not flag}">排放量</c:if></div>
        <div class="value">${data.count }${data.unit.name }</div>
        <div class="source"><a href="#">数据来源：${data.userinfo.name}</a></div>
        <div class="approve">${data.city.city_name}</div>
      </li>
      </c:forEach>
     <div class="pagination">
    <a id="first" href="<%=path %>/web/rubbish/rubbishDetail?pageNum=1&rubbishId=${requestScope.rubbish.id}">首页</a>
    
    <c:forEach items="${requestScope.datas.navigatepageNums }" var="page">
    	<c:if test="${requestScope.pageNum==page }" var="flag"><a id="page${page }" href="javascript:void(0);">${page}</a></c:if>
    	<c:if test="${not flag }" ><a id="page${page }" href="<%=path %>/web/rubbish/rubbishDetail?pageNum=${page}&rubbishId=${requestScope.rubbish.id}" class="number">${page}</a></c:if>
    </c:forEach>
   
    <a id="last" href="<%=path %>/web/rubbish/rubbishDetail?pageNum=${requestScope.pageInfo.pages}&rubbishId=${requestScope.rubbish.id}">尾页</a>
    <span>共${requestScope.datas.pages}页</span>&nbsp;&nbsp;
	<span>共&nbsp;${requestScope.datas.total}&nbsp;条数据</span>
  </div>
    </ul>
    <p>目前数据量较少，统计数据参考性低。查看<a style="text-decoration:underline;" href="javascript:void(0);" id="statistics">统计详情</a></p>
  </div>
</article>
<article class="article">
  <div class="title">
    <h2>跟${requestScope.rubbish.secondtype.title }相关的文论</h2>
    <a class="bunt" href="<%=path %>/web/article/list" id="countByTime">查看更多</a>
  </div>
  <ul>
  <c:forEach items="${requestScope.articles}" var="article">
    <li>
      <h3><a href="<%=path %>/web/article/articleSingle?articleId=${article.id}">${article.title }</a></h3>
      <span>作者：${article.userinfo.name }</span>
      <span>点赞：${article.praiseCount }</span>
      <span>评论：${article.commentCount }</span>
      <p>${article.content }...</p>
    </li>
   </c:forEach>
  </ul>
</article>
</section>
</div>
<jsp:include page="/WEB-INF/web/includ/footer.jsp"></jsp:include>
<script type="text/javascript" src="<%=path%>/static/managecss/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="<%=path%>/static/managecss/lib/layer/2.4/layer.js"></script>

<script type="text/javascript" src="<%=path%>/static/managecss/lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="<%=path%>/static/managecss/lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="<%=path%>/static/managecss/lib/jquery.validation/1.14.0/messages_zh.js"></script> 
<script type="text/javascript" src="<%=path%>/static/js/jquery-3.2.1.js"></script>
<script src="<%=path%>/static/js/highcharts.js"></script>
 <script src="<%=path%>/static/js/data.js"></script>
 <script src="<%=path%>/static/js/exporting.js"></script>
 <script src="<%=path%>/static/js/highcharts-zh_CN.js"></script>
 <script src="<%=path%>/static/js/oldie.js"></script>
 <script src="<%=path%>/static/js/series-label.js"></script>
<script type="text/javascript">
	var chart=null;
$(function(){
	$.ajax({
		type:"POST",
		url:"<%=path%>/web/data/dataStatisticsByYear",
		data : "rubbishId="+${requestScope.rubbish.id}+"&year="+2019+"&cityId="+(-1),
		dataType:"json",
	success : function(result) {
			chart=null;
			chart = Highcharts.chart('container', {
			title: {
				text: '2019 年全国'+'${requestScope.rubbish.name}排放量回收量统计'
			},
			subtitle: {
				text: '数据来源：ChaFenLei.com'
			},
			yAxis: {
				title: {
					text: '垃圾总量/吨'
				}
			},
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'middle'
			},
			plotOptions: {
				series: {
					label: {
						connectorAllowed: false
					},
					
				}
			},
			xAxis: {
				categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
			},
			series: [{
				name: '回收量',
				data: [result[0],result[2],result[4],result[6],result[8],result[10],result[12],result[14],result[16],result[18],result[20],result[22]]
			}, 
			{
				name: '排放量',
				data: [result[1],result[3], result[5], result[7], result[9],result[11],result[13],result[15],result[17],result[19],result[21],result[23]]
			}
			],
			responsive: {
				rules: [{
					condition: {
						maxWidth: 100
					},
					chartOptions: {
						legend: {
							layout: 'horizontal',
							align: 'center',
							verticalAlign: 'bottom'
						}
					}
				}]
			}
	}
			);	
		
	
	}})
})
$(function() {
	$("#button").click(function() {
	var keyword = $("#seach").val();

	 location.href="<%=path %>/web/rubbish/searchResult?keyword="+keyword; 
	})
})
$(function() {
	$("#statistics").click(function() {
		$(".statisticsPage").css("display","block");
		$(".innertable").css("display","block");
	})
})
$(function() {
	$("#returnToDetail").click(function() {
		$(".statisticsPage").css("display","none");
		$(".innertable").css("display","none");
	})
})
	$(function() {
				var f = ${requestScope.provinces!=null };
				if(f){
					initCity();
				}
				
					$("#province").change(initCity);
				
			})
			
			
			function initCity() {
		
				var provinceId = $("#province").val();
				if(provinceId==-1){
					$("#city").empty();
					$("#city").append("<option value=\"-1\" selected>全国所有城市</option>");	
					return;
				}
				$("#city").empty();
		
				$.ajax({
							type : "POST",
							url : "<%=path%>/web/userinfo/findAllByProvinceId",
							data : "provinceId="+provinceId,
							dataType:"json",
							success : function(city) {
							
								
							 for(var i=0;i<city.length;i++)
							 {
							 	$("#city").append("<option value=\""+city[i].city_ID+"\">"+city[i].city_name+"</option>");				 	
							 }	
							}
						}); 
					}
			
			/* 撤销所有 */
	$(function() {
				$("#back").click(function() {
				
					$("input[type!=submit]").val("");
				})		
		})
	$(function(){
		$("#statisticsByCity").click(function(){
			$.ajax({
				type:"POST",
				url:"<%=path%>/web/data/dataStatisticsByYear",
				data : "rubbishId="+${requestScope.rubbish.id}+"&year="+$("#year").val()+"&cityId="+$("#city").val(),
				dataType:"json",
			success : function(result) {
					chart=null;
					chart = Highcharts.chart('container', {
					title: {
						text: $("#year").val()+'年'+$("#city").find("option:selected").text()+'${requestScope.rubbish.name}排放量回收量统计'
					},
					subtitle: {
						text: '数据来源：ChaFenLei.com'
					},
					yAxis: {
						title: {
							text: '垃圾总量/吨'
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'middle'
					},
					plotOptions: {
						series: {
							label: {
								connectorAllowed: false
							},
							
						}
					},
					xAxis: {
						categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
					},
					series: [{
						name: '回收量',
						data: [result[0],result[2],result[4],result[6],result[8],result[10],result[12],result[14],result[16],result[18],result[20],result[22]]
					}, 
					{
						name: '排放量',
						data: [result[1],result[3], result[5], result[7], result[9],result[11],result[13],result[15],result[17],result[19],result[21],result[23]]
					}
					],
					responsive: {
						rules: [{
							condition: {
								maxWidth: 100
							},
							chartOptions: {
								legend: {
									layout: 'horizontal',
									align: 'center',
									verticalAlign: 'bottom'
								}
							}
						}]
					}
			}
					);	
				
			
			}})
					
		})
	})
	
	$(function(){
		$("#searchByPeriod").click(function(){
			$.ajax({
				type:"POST",
				url:"<%=path%>/web/data/dataStatistics",
				data : "rubbishId="+${requestScope.rubbish.id}+"&cityId="+$("#city").val()+"&beginTime="+$("#datemin").val()+"&endTime="+$("#datemax").val(),
				dataType:"json",
				success : function(result2) {
					$("#disposeCount").html("回收量:"+result2[0].toExponential(2)+"(吨)");
					$("#dischargeCount").html("排放量:"+result2[1].toExponential(2)+"(吨)");
				}
			})	
				
		})	
	})	
</script>
</body>
</html>
